<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" href="../css/elementui.css">
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script src="../script/elementui.js"></script>
    <style>
        .head {
            padding: 8px 10px;
            background: #090909;
        }

        .content {
            padding: 20px;
        }

        .sub {
            /* border-left: 1px solid #dcdcdc; */
            padding-left: 15px;
        }

        .more {
            font-size: 14px;
            color: #4f8af7;
            line-height: 40px;
        }

        .more>* {
            vertical-align: middle;
        }

        .head .van-row .van-col .van-field__label {
            width: 60px;
            color: #e6c678;
        }

        .head .van-row .van-col .van-field__control {
            color: #fff;
            border-bottom: 2px solid #e6c678 !important;
        }

        .van-cell {
            background-color: transparent;
        }

        .van-cell::after {
            border-bottom: 0;
        }

        .head .van-row .van-col,
        .content .van-row .van-col {
            margin-bottom: 8px;
            text-align: center;
            font-weight: 300;
            color: #e6c678;
            font-size: 14px;
        }

        .content .van-row .van-col .van-field {
            padding: 0;
            background: #fff;
            border: 1px solid #cecece;
            border-radius: 5px;
        }

        .content .van-row .van-col .van-field__control {
            color: #000;
        }

        @keyframes load {
            0% {
                box-shadow: inset 0px 0px 100px 10px rgba(61, 134, 208, 0.6);
            }

            100% {
                box-shadow: inset 0px 0px 20px 10px rgba(61, 134, 208, 0.1);
            }
        }

        .green {
            color: green;
        }

        .red {
            color: red;
        }

        .yellow {
            color: yellow;
        }

        .right-button .van-button {
            margin-left: 5px;
            min-width: 100px;
        }

        .subTitle {
            padding: 5px 20px;
            color: #e6c678;
            font-weight: bold;
            font-size: 18px;
            box-shadow: 0px 1px 5px rgb(230, 198, 120);
            background: #29292a;
        }

        .subTitle .van-row .van-col {
            text-align: center;
        }

        .scanImg img {
            width: 40px;
            height: 40px;
        }

        .scanPop {
            width: 160px;
            height: 180px;
            text-align: center;
            background-color: transparent;
            margin: 0;
            padding: 0;
        }

        .van-icon-enlarge {
            font-size: 150px;
            color: #e6c678;
            margin: 0;
            padding: 0;
        }

        .inputClass {
            opacity: 0;
            width: 150px;
        }

        .scanLine {
            position: absolute;
            z-index: 2;
            width: 66%;
            height: 2px;
            transform: translateX(25%);
            background-color: #e6c678;
            animation: scanLineMove 2s infinite;
        }

        .newClass {
            color: red;
        }

        @keyframes scanLineMove {
            from {
                top: 30px;
            }

            to {
                top: 120px;
            }
        }

        .el-radio.is-bordered.is-checked {
            border-color: #e6c678;
        }

        .el-radio__input.is-checked .el-radio__inner {
            border-color: #e6c678;
            background: #e6c678;
        }

        .el-radio__input.is-checked+.el-radio__label {
            color: #e6c678;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="head">
                <van-row gutter="5">
                    <van-col span="2">
                        <van-button size="small" color="linear-gradient(#fffeaa, #c07d39)" type="primary"
                            @click="onClickLeft">返回</van-button>
                    </van-col>
                    <van-col span="7">
                        <van-field v-model="formData.EquipmentName" label="设备名称" placeholder="选择设备" readonly
                            @click="openBaseScreen('机台')">
                        </van-field>
                    </van-col>
                    <van-col span="7">
                        <van-field v-model="formData.empolorName" label="巡机人员" placeholder="选择巡机人员"
                            @click="scanShow = true" readonly>
                        </van-field>
                    </van-col>
                </van-row>
            </div>

            <div class="subTitle">
                <van-row type="flex" justify="center">
                    <van-col span="3">序号</van-col>
                    <van-col span="7">巡机项</van-col>
                    <van-col span="7">巡机项说明</van-col>
                    <van-col span="7">结果</van-col>
                </van-row>
            </div>

            <div class="content">
                <van-row v-for="(item, index) in checkValue" type="flex" justify="center">
                    <van-col span="3">{{item.Number}}</van-col>
                    <van-col span="7">{{item.TypeName}}</van-col>
                    <van-col span="7">{{item.InspectionRemark}}</van-col>
                    <van-col span="7">
                        <el-radio size="small" v-model="item.Result" label="1" border>是</el-radio>
                        <el-radio size="small" v-model="item.Result" label="0" border>否</el-radio>
                    </van-col>
                </van-row>
            </div>

            <div class="bottom">
                <div class="right-button flex-box">
                    <van-button color="#e6c678" @click="submit" block :disabled="ifConfirm" :loading="ifConfirm"
                        loading-text="提交中...">保存</van-button>
                </div>
            </div>

            <van-popup v-model="scanShow" class="scanPop">
                <div class="scanLine"></div>
                <van-icon name="enlarge"></van-icon>
                <input id="autoInput" class="inputClass" inputmode="none" type="number" v-model="inputCode" ref="input" autofocus
                    @keyup.enter="inputFocus()">
            </van-popup>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '机台') {
                vm.formData.EquipmentName = row.EquipmentName;
                vm.formData.EquipmentID = row.EquipmentID;
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                scanShow: true,
                inputCode: '',
                formData: {
                    EquipmentName: api.pageParam.equipment.EquipmentName,
                    EquipmentID: api.pageParam.equipment.EquipmentID,
                    empolorName: '',
                    empolorID: '',
                },
                checkValue: [],
                deviceStatusActions: [],
                ifConfirm: false
            },
            created: function () {
                var that = this;
                console.log('巡机API', JSON.stringify(api.pageParam))
                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }

                if (api.pageParam.roleName == '组长') {
                    that.scanShow = false
                    that.formData.empolorID = window.localStorage.getItem('card_no')
                    that.formData.empolorName = window.localStorage.getItem('loginName')
                } else {
                    setTimeout(() => {
                        that.$refs.input.focus()
                        that.$refs.input.setAttribute('readonly', 'readonly');
                        setTimeout(function () {
                            that.$refs.input.removeAttribute('readonly');
                        }, 500);
                    }, 1500)
                }

                that.getList()
            },
            methods: {
                onClickLeft() {
                    api.closeFrame()
                },
                getList() {
                    var that = this
                    APP.ajax('ZS_XunJiList', {}, function (res) {
                        res.ds.map((item) => {
                            item.Result = '1'
                        })
                        that.checkValue = res.ds
                    })
                },
                inputFocus() {
                    var that = this
                    vm.$toast(that.inputCode);
                    APP.ajax('ZS_CardLogin', { P_Card: that.inputCode }, function (res) {
                        if (res.ds[0].status == 200) {
                            that.formData.empolorID = res.ds[0].card_no
                            that.formData.empolorName = res.ds[0].Name
                            that.scanShow = false
                            vm.$toast(res.ds[0].msg);
                        } else {
                            vm.$toast(res.ds[0].msg);
                        }
                        that.inputCode = ''
                    })
                },
                openBaseScreen(str) {
                    var that = this
                    var that = this;
                    var obj;
                    if (str == '机台') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['EquipmentName', 'EquipmentID', 'EquipmentCode'],
                            isPaging: false,
                            type: str,
                            cmd: 'getZSEquipment',
                            param: {
                            }

                        }
                    }
                    api.openWin({
                        name: 'baseScreen',
                        url: 'common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: obj
                    })
                },
                submit() {
                    var that = this
                    that.ifConfirm = true
                    that.checkValue.map((item) => {
                        item.EquipmentID = that.formData.EquipmentID
                        item.empolorID = that.formData.empolorID
                        item.empolorName = that.formData.empolorName
                        item.EquipmentName = that.formData.EquipmentName
                        APP.ajax('ZS_XunJij', item, function (res) {
                            if (res.ds[0].status != 200) {
                                api.toast({
                                    msg: '巡机失败，请重试!',
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                return false
                            }
                        })
                    })
                    that.ifConfirm = false
                    api.toast({
                        msg: '巡机成功!',
                        duration: 2000,
                        location: 'bottom'
                    });
                    api.sendEvent({
                        name: 'refreshBrowser',
                        extra: {
                            clearName: api.pageParam.name
                        }
                    })
                    api.closeFrame()
                }
            }
        })
    };
</script>

</html>